<!-- 首页 -->
<template>
    <div class="box">
        <div class="top">
            <p>诺贝尔自然科学奖
                <span>
                    (物理、化学、生理或医学）是标志性科技创新成果的重要表现，是评估国家科技实力的重要指标。诺贝尔自然科学奖知识库，支持对诺奖得主地理分布、国家迁移、师承关系、学术图谱、成长规律等的挖掘和计量分析，支持对获奖与政治经济、研发投入、教育水平等社会环境因素之间关系的研究与揭示，为科技史及相关领域研究提供知识服务和工具平台支撑。
                </span>
            </p>
        </div>
        <div class="middle">
            <div class="center">
                <img src="../../assets/jiangxiang.jpg" alt="">
                <div class="content">
                    <h2>3个</h2>
                    <p>奖项</p>
                </div>
            </div>
            <div class="center">
                <img src="../../assets/jiangxiang.jpg" alt="">
                <div class="content">
                    <h2>334次</h2>
                    <p>颁奖次数</p>
                </div>
            </div>
            <div class="center">
                <img src="../../assets/jiangxiang.jpg" alt="">
                <div class="content">
                    <h2>634位</h2>
                    <p>诺奖得主</p>
                </div>
            </div>
            <div class="center">
                <img src="../../assets/jiangxiang.jpg" alt="">
                <div class="content">
                    <h2>9.3万</h2>
                    <p>获奖得主成果</p>
                </div>
            </div>
            <div class="center">
                <img src="../../assets/jiangxiang.jpg" alt="">
                <div class="content">
                    <h2>411册</h2>
                    <p>诺奖研究专著</p>
                </div>
            </div>
        </div>


        <div class="bottom">
            <div class="btm_left">
                <p :class="{ active: active == item.name }" v-for="item in queryList" :key="item.name"
                    @click="search(item)">{{ item.name }}</p>
            </div>
            <div style="display: flex;flex-direction: column;align-items: center">
                <p class="charttext">获奖者国家纵览</p>
                <div class='chart' id='geo_echarts' v-loading="chartLoading">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { overviewOfWinnerCountry } from "@/api/home";
import * as echarts from 'echarts';
// import echarts from 'echarts';
import { initMap, } from "./index";
export default {
    data () {
        return {
            chartLoading: true,
            geographicalMap: [],//地图数据
            active: "全部",
            queryList: [
                { name: "全部", key: '' },
                { name: "物理学", key: 'Physics' },
                { name: "化学", key: 'Chemistry' },
                { name: "生物学或医学", key: 'Physiology or Medicine' }
            ],
            //查询参数
            queryParams: {
                category: null,
            },
        }
    },
    mounted () {

        this.getOverviewOfWinnerCountry()

        // setTimeout(() => {

        //     initMap(this.geographicalMap);
        // }, 3000);
        // this.$nextTick(() => {
        // })
    },
    computed: {

    },
    created () {

    },
    methods: {
        search (item) {
            this.active = item.name
            this.queryParams.category = item.key
            this.getOverviewOfWinnerCountry(null, this.geographicalMap)
        },
        getOverviewOfWinnerCountry () {
            this.chartLoading = true
            overviewOfWinnerCountry(this.queryParams).then((res) => {
                this.geographicalMap = res.body

                this.drawChart(null, res.body)
                // initMap(this.geographicalMap);

                this.chartLoading = false
            })
        },

        drawChart (name, data) {
            let chartdata = data
            // 基于准备好的dom，初始化echarts实例
            let chart = echarts.init(document.getElementById('geo_echarts'))
            // 监听屏幕变化自动缩放图表
            window.addEventListener('resize', function () {
                chart.resize()
            })


            var option;
            var app = {};
            var geoCoordMap = {

                'United States': [-93.26801274, 44.29048647],
                'United Kingdom': [-4.750030763, 55.93329002,],
                'Japan': [133.9170865, 34.67202964],
                'Germany': [49.98247246, 8.273219156],
                'France': [45.89997479, 6.116670287],
                'Switzerland': [7.344999488, 47.36999713],
                'Sweden': [15.64700455, 60.61300204],
                'Russia': [43.23300312, 44.78300151],
                'Canada': [-96.88332178, 50.15002545],
                'Denmark': [9.534996498, 55.70900103],
                'the Netherlands': [6.550002585, 53.00000109],
                'Austria': [47.51669707, 47.51669707],
                'Italy': [15.7989965, 40.64200213],
                'Belgium': [3.939003561, 50.44599911],
                'Australia': [151.3000048, -33.42004148],
                'Israel': [34.86670252, 31.91670012],
                'Norway': [8.766000553, 58.46475606],
                'Argentina': [-72.30001612, -51.65003986],
                'China': [97.72999304, 39.83003522,],
                'Czech Republic': [14.08100455, 50.66299816],
                'Finland': [24.47199954, 60.99699611],
                'Hungary': [17.91099957, 47.09099714],
                'India': [73.81800065, 15.491997],
                'Ireland': [-8.1833333, 53.6333333],
                'Portugal': [-8.650997534, 40.64100311],
                'Spain': [6.337997512, 38.91200402],
                'Tunisia': [10.41669956, 33.399999]

            };

            var series = [];

            [["", chartdata]].forEach(function (item, i) {
                series.push({
                    type: "effectScatter",
                    coordinateSystem: "geo",
                    zlevel: 2,

                    rippleEffect: {
                        //涟漪特效
                        period: 4, //动画时间，值越小速度越快
                        brushType: "fill", //波纹绘制方式 stroke, fill
                        scale: 4 //波纹圆环最大限制，值越大波纹越大
                    },
                    label: {
                        normal: {
                            show: true,
                            position: "right", //显示位置
                            offset: [5, 0], //偏移设置
                            formatter: "{b}" //圆环显示文字
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    symbol: "circle",

                    symbolSize: function (val) {
                        return val[2] / 5; //圆环大小
                    },
                    itemStyle: {
                        normal: {
                            show: false,
                        }
                    },
                    data: item[1].map(function (dataItem) {
                        return {
                            name: dataItem.country,
                            value: geoCoordMap[dataItem.country].concat([dataItem.count])
                        };
                    })
                },

                );
            });

            option = {
                backgroundColor: '#ccd6d7',
                visualMap: {
                    //图例值控制
                    min: 0,
                    max: 10000,
                    show: false,
                    calculable: true,
                    color: ["#ff9500"],
                    textStyle: {
                        color: "#fff"
                    },

                },
                tooltip: {
                    trigger: "item",
                    backgroundColor: "#D5E9A0",
                    borderColor: "#FFFFCC",
                    showDelay: 0,
                    hideDelay: 0,
                    enterable: true,
                    transitionDuration: 0,
                    extraCssText: "z-index:100",
                    formatter: function (params, ticket, callback) {
                        //根据业务自己拓展要显示的内容
                        var res = "";
                        var name = params.name;
                        var value = params.value[2];
                        res =
                            "<span style='color:#000;'>" +
                            name +
                            "</span><br/>人数：" +
                            value;
                        return res;
                    }
                },
                geo: {
                    map: "world",
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    roam: true, //是否允许缩放
                    layoutCenter: ["50%", "50%"], //地图位置
                    layoutSize: "190%",
                    itemStyle: {
                        normal: {
                            areaColor: '#edf3f3',
                            borderColor: '#9d9f9f'
                        },
                        emphasis: {
                            areaColor: '#2a333d'
                        }
                    }
                },

                series: series
            };
            if (option && typeof option === 'object') {
                chart.setOption(option);
            }



        }
    }

}
</script>


<style scoped lang='less'>
.box {
    width: 1200px;
}

.home {
    background: red;
}

.top p {
    width: 828px;
    height: 197px;
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 44px;
    margin-top: -60px;
}

.top p span {
    width: 828px;
    height: 197px;
    font-size: 22px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 44px;
}

.top {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: url(../../assets/backimg.jpg) no-repeat center center;
    background-size: cover;
    height: 500px;
    margin: 0 auto;
}

.box {
    width: 100%;
    height: 100%;
}

.center {
    width: 230px;
    height: 80px;
    background: #FFFFFF;
    border-radius: 8px;
    display: flex;
    /* justify-content: center; */
    padding-left: 30px;
    box-sizing: border-box;
    align-items: center;
}

.center img {
    width: 50px;
    height: 50px;
    margin-right: 30px;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.middle {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-top: -60px;
}

.bottom {
    width: 1200px;
    background: #F5FFD9;
    height: 368px;
    margin: 20px auto;
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
    box-sizing: border-box;
}

.btm_left {
    box-sizing: border-box;
    width: 175px;
    height: 328px;
    background: #D5E9A0;
    border-radius: 10px;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
}

.btm_left p {
    padding-left: 20px;
    width: 175px;
    height: 40px;
    /* background: #FFFFFF; */
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    align-items: center;

}

.chart {
    background: #D5E9A0;
    width: 745px;
    height: 280px;
    margin-top: 20px;
}

.btm_left p {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #666666;
}

.active {
    width: 175px;
    height: 40px;
    background: #FFFFFF;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #251919 !important;
}

.content h2 {
    font-size: 28px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #3E5215;
}

.content p {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
}

.charttext {
    // width: 148px;
    height: 20px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #3E5215;
    line-height: 20px;
}
</style>
